
<include file="mobile/Public/header" />

<link rel="stylesheet" href="__CSS__/detail_font.css">
<link rel="stylesheet" href="__CSS__/makeorder.css">
<link rel="stylesheet" href="__CSS__/good.css">
<style>
    .status-section{padding: 0.834rem;}
    .detail-title{line-height: 1.7;}
    .delivery-section{padding-right: 2rem}
    .delivery-status{color: #359A2B}
    .detail-footer.btn-footer{text-align: right;padding-right: 0.834rem}
    .remark-input{padding-left: 7rem}
    .paystyle-select{padding-left: 12rem; color: #333333;border: none;outline: none}
    .paystyle{position: absolute; top: -5.5rem;width: 100%}
    .good-section-img {height: auto; width: 48%; }
    .good-section-left{position:inherit;}
</style>
<style>

    body {
        background-color: #fff;
        margin-bottom: 60px ;
    }
    .order-title {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        padding:8px 15px;
        /*border-bottom: 1px solid #ddd;*/

        height: auto;
    }

    .order-title img  {
        width:50px;
        display: block;
        border-radius: 3px;
    }


    .order-info {
        -webkit-box-flex:1;
        -webkit-flex:1;
        -ms-flex:1;
        flex:1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow:column nowrap;
        -ms-flex-flow:column nowrap;
        flex-flow:column nowrap;
        text-align: left;
        margin-left:15px;
        /*height: 100%;*/
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .order-info h1,.item-content h2  {
        color: #4a4a4a;
        font-size:18px;
    }

    .order-info h2,.item-content p  {
        color: #a5a5a5;
        font-size:14px;
    }

    .time-line {
        position: relative;
        margin:20px 7vw;

    }



    .time-line:before {
        content: '';
        position: absolute;
        top: 0;
        left: 60px;
        height: 100%;
        width: 2px;
        background: #ddd;
    }

    .item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        font-size:14px;
        position: relative;
        margin-bottom:30px;
    }

    .item:before {
        content: '';
        background-color: #888;
        width: 5px;
        height: 5px;
        border: 3px #ddd solid;
        border-radius: 50%;
        box-shadow: 0 1px 2px #aaa;
        position: absolute;
        left: 55px;
        top: 6px;
    }

    .item:first-child:before {
        background-color: #ee0027;
    }


    .item-time {
        width:45px;
        text-align: center;
    }

    .item-content {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-left:40px;
    }

    hr {
        border: 1px solid #ddd;
    }


    /* 对话留言*/

    .dialog {
        margin: 20px 15px;
    }

    .dialog-item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .dialog-content {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;
        -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .dialog-content .content {
        background-color: #fe8fae;
        border-radius: 6px;
        padding:5px 10px;
        color: #fff;
        text-align: left;
    }

    .dialog-content time {
        font-size: 12px ;
        text-align: right;
        color: #b1b1b1;

    }

    .dialog-avatar {
        -webkit-flex-basis:40px ;
        -ms-flex-preferred-size:40px ;
        flex-basis:40px ;
        height:40px ;

        margin-left: 5px;
        margin-right: 5px;
    }

    .dialog-avatar img {
        display: block;

        width:100%;
        border-radius: 50%;
    }

    .dialog-item.left {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-flex-flow: row-reverse nowrap;
        -ms-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap;
    }

    .dialog-item.left time   {
        text-align: left;
    }

    .dialog-item.left .content {
        background-color: #fff;
        color: #666;
        border: 1px solid #ddd;
    }

    .dialog-item.left .dialog-content {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;

    }


    .comment {
        position: fixed;
        bottom:0;
        background-color: #f3f3f3;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;
        padding:  10px;
        border-top: 1px solid #eee;
        max-width: 600px;
        margin: 0 auto;
        left: 0;
        right: 0;

    }

    .comment .input  {
        -webkit-box-flex: 3;
        -webkit-flex: 3;
        -ms-flex: 3;
        flex: 3;
        border: 1px solid #ddd;
        padding: 5px;
        border-radius: 3px;
        background-color: #fff;
        color: #666;
        outline: none;
        font-size: 16px;
    }

    .comment button {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fe8fae;
        color: #fff;
        border: none;
        border-radius: 5px;
        margin-left:10px;
        font-size: 16px;
        font-weight: 600;
    }

</style>
<style>
    .tab-content .tab-pane {
        display: none;
    }

    .tab-content .tab-pane.active {
        display: block;
    }
    .tab-list {
        display: flex;
    }

    .tab-list li {
        flex: 1;
        text-align: center;
        border-bottom: 1px solid #ddd;
        border-radius: 3px;
    }


    .tab-list li:first-child {
        border-right: 1px solid #ddd ;

    }

    .tab-list li.active {
        border-bottom: none;
        border-top: 1px solid #ddd ;

    }

    .tab-list li a {
        display: block;
        padding: 5px 0;
        color: #666;
    }
    
</style>
<header class="color-main vertical-box">
    <span class="header-title">订单详情</span>
    <div class="header-left vertical-box">
        <img class="img-btn" src="__IMG__/back.png" onclick="window.location.href='{:U('shop/index/true_order_list')}'">
    </div>
    <div class="header-right vertical-box">
        <img class="img-btn" src="__IMG__/home.png" onclick="window.location.href='{:U('shop/index/index')}'">
    </div>
</header>

<div class="order-title">
    <div><img src="__IMG__/cloth01.jpg" alt=""></div>
    <div class="order-info">
        <h1>{$order['title']}</h1>
        <h2>交货计划：{$order['limit_time']}</h2>
        <h2>交期预警：<php> if(!empty($order['warn_time'])) echo date('Y-m-d H:i:s',$order['warn_time']) </php></h2>
    </div>
</div>

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="tab-list" data-trigger="test" role="tablist">
    <li class="active"><a href="#time-line" role="tab" data-toggle="tab">进度</a></li>
    <li><a href="#dialog-pane" role="tab" data-toggle="tab">留言</a></li>

</ul>
<!-- 选项卡面板 -->
<!--tab-content 和 tab-pane 必须有-->
<div id="myTabContent" class="tab-content" data-target="test" >
    <div class="time-line tab-pane active" id="time-line"></div>
    <div class=" tab-pane" id="dialog-pane">
        <div class="dialog " id="dialog"></div>
        <footer class="comment">
            <input type="text" class="input" id="remark" placeholder="请输入留言">
            <!--<div class="input" id="remark"   contenteditable="true">

            </div>-->
            <button id="submit-btn">发送</button>
        </footer>
    </div>
</div>






<include file="mobile/Public/footer" />

<!--选项卡 -->
<script>
    function Tab(option) {
        this.tabList = document.querySelector(option.tabList)  ; //菜单列表容器
        var trigger = this.tabList.getAttribute("data-trigger"); //用来识别对应目标容器
        this.target = document.querySelector(".tab-content[data-target=" +  trigger + "]");//目标容器
        this.tabPanes = Array.prototype.slice.call( this.target.getElementsByClassName("tab-pane") ); //，，目标tab-pane 元素数组
        this.tabListItems = [].slice.call( document.querySelectorAll(option.tabList + " li") ) ;
    }

    Tab.prototype.init = function () {
        this.bindEvent();
    };

    //显示选项卡
    Tab.prototype.show = function(elem) {
        var tabPane = document.querySelector( elem.getAttribute("href") );

        elem.parentNode.classList.add("active");
        tabPane.classList.add('active');
    };

    //隐藏全部
    Tab.prototype.hideAll = function() {
        this.tabListItems.forEach(function (item) {
            item.classList.remove("active");
        });
        this.tabPanes.forEach(function (item) {
            item.classList.remove("active");
        })
    };


    Tab.prototype.bindEvent = function() {
        var This = this;
        This.tabList.addEventListener('click',function (e) {
            e = e || window.event;
            var target = e.target ||e.srcElement;

            if (target.getAttribute('data-toggle') == 'tab' ){
                This.hideAll();
                This.show(target);
            }

            e.preventDefault();
            return false
        })

    };

    var myTab = new Tab({
        tabList: "#myTab"
    });

    myTab.init();




</script>

<!--  -->
<script>
    var formatNum = function(num, length  ) {
        //保留length位小数， 然后用substr(2)取小数部分
        length = typeof length == 'undefined' ? 2 : length;
        return (num / Math.pow(10, length)).toFixed(length).substr(2);

    };

    function formatTime(date){

        return date.getFullYear() + '-' + formatNum(date.getMonth() + 1) + '-' + formatNum( date.getDate() ) + ' ' +
                formatNum( date.getHours() )+ ':'+ formatNum( date.getMinutes() );
    }


</script>

<script>
    //'jquery' or 'zepto' 脚本入口,按情况选择加载
    seajs.use(['jquery','zepto'], function () {
        (function () {
            var page = 1;
            var r = 10;
            var order_id = "{$order['id']}";
            var userId = {$user_id}, userAvatar ='' ;
            //进度
            $.post('/index.php?s=/shop/index/true_order_progress.html',
                    {page:page, r:r, order_id:order_id},
                    function (res) {
                        if (res.status == 1 && !!res.info.list ) {
                            var progressHtml = '';
                            var date;

                            res.info.list.forEach(function (item) {
                                date = new Date(item.create_time*1000 );
                                progressHtml += ' <section class="item">' +
                                        '     <div class="item-time"><span> '+ formatNum(date.getMonth()+1) + '- ' +
                                        formatNum(date.getDate()) +
                                        ' </span>  <br><span>' + formatNum(date.getHours())  + ':' + formatNum(date.getMinutes()) +
                                        '</span></div>                                           ' +
                                        '                                            <div class="item-content">' +
                                        '         <h2>' + item.status + '</h2>' +
                                        '         <p>' + item.content + '</p>' +
                                        '     </div>' +
                                        ' </section>' ;
                            })
//                            console.log(progressHtml)
                            $('#time-line').html(progressHtml);

                        }  else {
                            $('#time-line').html('<p style="text-align: center;">暂时没有更多进度</p>');
                        }
                    });

            //对话
            $.post('/index.php?s=/shop/index/true_order_remark.html',{page:page, r:r, order_id:order_id},function (res) {
                if (res.status == 1  && !!res.info.list) {
                    var dialogHtml = '';
                    var position = '',
                            img = '';
                    var flag = 1; //只执行一遍 标识符

                    res.info.list.reverse().forEach(function (item) {
                        position = item.user_id == userId ?  'right' : 'left';

                        if ( item.user_id == userId && flag ) {
                            userAvatar = item.avatar.indexOf('http') >= 0 ? item.avatar : (window.location.origin+ '/' +
                            item.avatar );
                            flag = 0;
                        }

                        img = item.avatar.indexOf('http') >= 0 ? item.avatar : (window.location.origin+ '/' +
                        item.avatar );

                        dialogHtml += '<section class="dialog-item ' + position +'"  >' +
                            '<div class="dialog-content">' +
                            '<p class="content">' + item.remark + '</p>' +
                                '<time>'+formatTime( new Date(item.create_time*1000) )+'</time>' +
                            '</div>' +
                       '<div class="dialog-avatar">' +
                       '    <img src='+ img +' alt="头像">' +
                       '</div>' +
                       '</section>'
                    })
                    $('#dialog').html(dialogHtml);
//                    console.log(dialogHtml)
                } else {
                    $('#dialog').html('<p style="text-align: center;">没有更多留言</p>');
                }
            });




            $("#submit-btn").click(function () {
                var remark = $("#remark").val();
                var order_id = "{$order['id']}";
                if(remark.trim()==""){
                    showTip(1000,"请输入留言内容。");
                    return
                }

                $.post("{:U('shop/index/true_order_remark')}",{remark:remark,order_id:order_id,action:'add' }, function (ret) {
                    if(ret.status==1){
//                        alert('留言成功！');

                        $('#dialog').append('<section class="dialog-item right"  >' +
                                '<div class="dialog-content">' +
                                '<p class="content">' + remark + '</p>' +
                                '<time>'+formatTime( new Date() )+'</time>' +
                                '</div>' +
                                '<div class="dialog-avatar">' +
                                '    <img src='+ userAvatar +' alt="头像">' +
                                '</div>' +
                                '</section>');
                        $('.dialog-item:last-of-type')[0].scrollIntoView();

                    }else{
                        alert('留言失败！');
                    }
//                    window.location.reload();
                })
            })
        })();




        $(document).ready(function () {
            $('.btn-group').on('click','button',function () {
                var id = "{$order['id']}";
                if(confirm('您确定要取消吗？')){
                    $.post('{:U('shop/index/true_order_list/')}',{id:id}, function (ret) {
                        if(ret.status==1){
                            alert('取消成功！');
                            window.location.reload();
                        }
                    })
                }
            });
            $('.remark-list').click(function () {
                var page = 1;
                var r = 10;
                var order_id = "{$order['id']}";
                $.post('{:U('shop/index/true_order_remark/')}',{page:page, r:r, order_id:order_id}, function (ret) {
                    if(ret.status==1){
                        alert('获取留言列表成功！');
                    }
                })
            });
            $('.progress-list').click(function () {
                var page = 1;
                var r = 10;
                var order_id = "{$order['id']}";
                $.post('{:U('shop/index/true_order_progress/')}',{page:page, r:r, order_id:order_id}, function (ret) {
                    if(ret.status==1){
                        alert('获取进度列表成功！');
                    }
                })
            });
            $(".submit-btn").click(function () {
               var remark = $("#remark").val();
               var order_id = "{$order['id']}";
               if(remark.trim()==""){
                   showTip(1000,"请输入留言内容。");
                   return
               }
               
               $.post("{:U('shop/index/true_order_remark')}",{remark:remark,order_id:order_id,action:'add' }, function (ret) {
                    if(ret.status==1){
                        alert('留言成功！');
                    }else{
                        alert('留言失败！');
                    }
                    //window.location.reload();
               })
           })
        })
    });
</script>
</body>
</html>